
import echarts from "echarts";
import { setInterval } from "timers";

let myEchart = echarts.init(document.getElementById("app"));
let showNumber = 100;
let ptList = new Array();
let i = 0;

let temBattaryList = new Array();
let temSpaceList = new Array();

let option = {
    title: {
        text: '温度状态图'
    },
    tooltip: {

    },
    legend: {
        data:['腔内温度', '蓄电池表面温度']
    },
    xAxis: {
        name: '时间',
        type: 'time',
        splitLine: {
            show: true
        },
        splitNumber: 10,
    },
    yAxis: {
        name: "温度",
        min (value) {
            return Math.floor(value.min) - 10;
        },
        max (value) {
            return Math.floor(value.max) + 10;
        },
        splitNumber: 10,
        splitLine: {
            show: true
        },
        axisLabel: {
            formatter: '{value} ℃'
        },
    },
    series: [
        {
            type: 'line',
            name: '腔内温度',

            showSymbol: true,
            
            animation: true,
            animationEasing: "quadraticOut",
            animationEasingUpdate: "quadraticOut",
            animationDurationUpdate: 0,
            markPoint: {
                data: [
                    {
                        type: 'max', 
                        name: '最大值',
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter (value) {
                                        return Math.floor(value.value);
                                    },
                                }
                            },
                        },
                    },
                    {
                        name: '测试1',
                        x: 950,
                        y: 20,
                        symbol: 'roundRect',
                        symbolSize: [80, 30],
                    },
                    {
                        name: '测试2',
                        x: 950,
                        y: 60,
                        symbol: 'roundRect',
                        symbolSize: [80, 30],
                        itemStyle: {
                            normal: {
                                color: "blue",
                                label: {
                                    formatter: '正常',
                                }
                            },
                        },
                    }
                ]
            },
            markLine: {
                data: [
                    {
                        type: 'max',
                        name: "最高",
                    }
                ]
            },
        },
        {
            type: 'line',
            name: '蓄电池表面温度',

            showSymbol: true,
            
            animation: true,
            animationEasing: "quadraticOut",
            animationEasingUpdate: "quadraticOut",
            animationDurationUpdate: 0,
        },
    ],
};

myEchart.setOption(option);

myEchart.on('click', (params) => {
    console.log(params);
});

setInterval(() => {
    temBattaryList.push([new Date(), 100 + Math.random() * 30]);
    temSpaceList.push([new Date(), 70 + Math.random() * 20]);
    let tmpArray1 = temBattaryList.slice(temBattaryList.length - showNumber, temBattaryList.length);
    let tmpArray2 = temSpaceList.slice(temSpaceList.length - showNumber, temSpaceList.length);
    myEchart.setOption({
        series: [
            {
                data: tmpArray1,
            },
            {
                data: tmpArray2,
            },
        ],
    });
}, 100);
